<template>
  <div id="asideTree" class="aside-tree">
    <div class="el-scrollbar" v-scrollBar>
      <el-tree
        :data="treeResult"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        @node-click="changeCategory"
        ref="tree"
        :highlight-current="true"
      >
        <div slot-scope="{ node, data }" style="cursor: pointer">
          <div
            class="node-label-wrap"
            :class="{ 'label-weight': node.data.level <= 1 }"
          >
            <el-tooltip
              :disabled="data.label.length < 8"
              effect="dark"
              :content="data.label"
              placement="top"
            >
              <span class="node-label">{{ data.label }}</span>
            </el-tooltip>
          </div>
        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  props: ["treeResult", "treeTotal"],
  data() {
    return {
      categoryId: 1,
    };
  },
  mounted() {},
  methods: {
    selectCategoryByNodeId(nodeId) {
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(nodeId);
      });
    },
    // 点击节点的时候
    changeCategory(data) {
      if (data.sID) {
        return;
      }
      this.categoryId = data.id;
      this.$emit("chooseCategoryNode", data);
      this.$emit("getList", data);
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
.node-label-wrap {
  width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aside-tree /deep/ .el-tree .el-tree-node__expand-icon.expanded {
  color: #a1a8b1;
}
.aside-tree /deep/ .el-tree .el-tree-node__expand-icon {
  color: #a1a8b1;
}
.aside-tree /deep/ .el-tree .is-leaf {
  color: transparent;
}
</style>
